<template>
  <!-- 整体内容盒子 -->
  <div class="content-box">
    <!-- 注册盒子 -->
    <div class="login-box">
      <!-- 表单盒子 -->
      <div class="title-box">
        <!-- 表单头部 -->
        <div class="title-header">
          <img src="../../assets/images/login_title.png" alt="" />
        </div>
        <!-- 表单内容 -->
        <div class="title-content">
          <el-form ref="loginRef" :model="LoginForm" :rules="loginRules">
            <el-form-item prop="username">
              <el-input
                placeholder="请输入用户名"
                v-model="LoginForm.username"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                placeholder="请输入密码"
                v-model="LoginForm.password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="btn-login" type="primary" @click="loginFn"
                >登录</el-button
              >
              <el-link type="info" @click="$router.push('/register')"
                >去注册</el-link
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { loginApi } from '@/utils/api'
// vue2 vue3 引入方式不同
import store from '@/store/index'
export default {
  name: 'Use-Login',
  data() {
    return {
      LoginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]{1,10}$/,
            message: '用户名必须是1-10为英文数字组成',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^\S{6,15}$/,
            message: '密码必须是6-15位的非空字符组成',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    loginFn() {
      this.$refs.loginRef.validate(async (valid) => {
        if (valid) {
          const { data: res } = await loginApi(this.LoginForm)
          // console.log(res)
          if (res.code !== 0) return this.$message.error(res.message)
          this.$message.success(res.message)
          store.commit('setToken', res.token)
          // console.log(this.$store.state.token)
          this.$router.push('/')
        } else return false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content-box {
  background-image: url('../../assets/images/login_bg.jpg');
  background-position-y: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  display: flex;
  .login-box {
    width: 400px;
    height: 280px;
    background-color: #fff;
    margin: auto;
    border-radius: 5px;
    .title-box {
      width: 85%;
      height: 100%;
      margin: 20px auto 0;
      .title-header {
        width: 100%;
        text-align: center;
      }
      .title-content {
        margin-top: 15px;
        .btn-login {
          width: 100%;
        }
      }
    }
  }
}
</style>
